<template>
	<view class="footprint">
	  
			<view class="uni-flex uni-row" v-if="historyList && historyList.length!=0">
				<view class="uni-flex-item">
					<best-gauge :config="gaugeOption1"></best-gauge>
				</view>
				<view class="uni-flex-item" v-if="isDisplay">
					<best-gauge :config="gaugeOption2"></best-gauge>
				</view>
			</view>
		<!--足迹列表-->
		<view class="row" v-for="(item, index) in historyList" :key="index">
			<!-- 删除按钮 -->
			<view v-if="false" class="menu" :class="'bg-' + themeColor.name" @tap.stop="handleDeleteFootPrint(item.id)">
				<text class="iconfont icon iconiconfontshanchu1"></text>
			</view>
			<!-- 商品 -->
			<view class="carrier" :class="[theIndex === index ? 'open' : oldIndex === index ? 'close' : '']">
				<view class="left">
					<image class="image" :src="'../static/health/' + item.images"></image>
					<image v-if="false" class="tag" :src="item.marketing_type | marketingTypeTag" mode="aspectFill"></image>
				</view>
				<view class="mid">
					<view class="title in2line">{{ item.texts }}</view>
					<view class="data">
						<view class="item" v-if="false">推荐 {{ 0 }}</view>
						<view class="item" v-if="false">
							<text class="iconfont iconkechakan"></text>
							浏览 {{ 0 }}
						</view>
						<view class="item" v-if="item.isFlag">
							<text class="status">{{ item.text }}</text>
						</view>
						<view class="item" v-else>
							<text class="normal">{{ item.text }}</text>
						</view>
					</view>
					<view class="bottom">
						<text class="price" :class="'text-' + themeColor.name">{{ item.gaugeType | filterType }}</text>
						<text>{{ item.testDay }}</text>
					</view>
				</view>
			</view>
		</view>		
		
	</view>
	
</template>


<script>
import uCharts from '@/components/u-charts/u-charts.js';
import { getHealthDayList, getHealthParam } from '@/api/userInfo';
import { isJSON } from '@/common/checker.js';
import moment from '@/common/moment';
import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';
//引入组件文件
import bestGauge from '@/components/best-gauge/best-gauge.vue';
var _self;
var canvaColumn = null;

export default {
	components: [rfLoadMore, bestGauge],
	data() {
		let _width = uni.upx2px(350);
		return {
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			textarea: '',
			page: 1,
			historyList: [],
			chartData: {},
			loading: true,
			loadingType: 'more',
			healthParamStr: '',
			size: [
				{ type: '血压', num: 3 },
				{ type: '血糖', num: 2 },
				{ type: '心率', num: 1 },
				{ type: '运动', num: 2 },
				{ type: '尿酸', num: 1 },
				{ type: '体质', num: 3 },
				{ type: '血氧', num: 2 },
				{ type: '胆固醇', num: 1 },
				{ type: '体温', num: 1 }
			],
			gaugeOption1: {
				//定义参数
				id: 'gaugeId0',
				value: 0,
				axisTickLength: 2, 
			},
			gaugeOption2: {
				//定义参数
					id: 'gaugeId1',
					value: 0,
					width: _width
			},
			gaugeOption3: {
				//定义参数
				id: 'gaugeId2',
				value: 0,
				axisTickLength: 2,
			},
			type : null
		};
	},
	computed:{		
		isDisplay(){
			if(this.type == '血压' || this.type == '体质' || this.type== '血氧' )	{				
			  return true;
			}else{
				return false;
			}
		}
     },
	filters: {
		filterType(val) {
			let gaugeType = '系统录入';
			if (val == 1) gaugeType = '健康一体机';
			else if (val == 5) gaugeType = '血压计';
			else if (val == 6) gaugeType = 'sdcc腕表';
			return gaugeType;
		}
	},
	onLoad(opition) {
		this.type = opition.type;
		this.cstmId = opition.cstmId;
		_self = this;
		//#ifdef MP-ALIPAY
		uni.getSystemInfo({
			success: function(res) {
				if (res.pixelRatio > 1) {
					//正常这里给2就行，如果pixelRatio=3性能会降低一点
					//_self.pixelRatio =res.pixelRatio;
					_self.pixelRatio = 2;
				}
			}
		});
		//#endif
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(500);
		if (this.type === '血压') {
			this.testType = 1;
		} else if (this.type === '血糖') {
			this.testType = 3;
		} else if (this.type === '心率') {
			this.testType = 10;
		} else if (this.type === '运动') {
			this.testType = 4;
		} else if (this.type === '尿酸') {
			this.testType = 8;
		} else if (this.type === '体质') {
			this.testType = 2;
		} else if (this.type === '血氧') {
			this.testType = 6;
		} else if (this.type === '胆固醇') {
			this.testType = 7;
		} else if (this.type === '体温') {
			this.testType = 5;
		} else if (this.type === '尿常规') {
			this.testType = 9;
		}
		uni.setNavigationBarTitle({
			title: this.type
		});
		this.getHealthParam();
		this.getServerData();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.historyList = [];
		this.chartData = {};
		this.getServerData('refresh');
	},
	onReachBottom() {
		this.page++;
		this.getServerData();
	},
	methods: {
		getHealthParam() {
			if (this.type === '血压') {
				this.healthParamStr = `正常值：高压(${uni.getStorageSync('XY_GY_MIN')}~${uni.getStorageSync('XY_GY_MAX')})、低压(${uni.getStorageSync(
					'XY_DY_MIN'
				)}~${uni.getStorageSync('XY_DY_MAX')})、脉搏(${uni.getStorageSync('MB_MIN')}~${uni.getStorageSync('MB_MAX')})`;
			} else if (this.type === '血糖') {
				this.healthParamStr = `正常值：餐前(${uni.getStorageSync('XT_KF_MIN')}~${uni.getStorageSync('XT_KF_MAX')})、餐后(${uni.getStorageSync(
					'XT_CH_MIN'
				)}~${uni.getStorageSync('XT_CH_MAX')})`;
			} else if (this.type === '心率') {
				this.healthParamStr = `正常值：心率(${uni.getStorageSync('MB_MIN')}~${uni.getStorageSync('MB_MAX')})`;
			} else if (this.type === '运动') {
				this.healthParamStr = ``;
			} else if (this.type === '尿酸') {
				this.healthParamStr = `正常值：尿酸(${uni.getStorageSync('NS_UMOL_MIN')}~${uni.getStorageSync('NS_UMOL_MAX')})`;
			} else if (this.type === '体质') {
				this.healthParamStr = ``;
			} else if (this.type === '血氧') {
				this.healthParamStr = `正常值：血氧(${uni.getStorageSync('XY_MIN')}~${uni.getStorageSync('XY_MAX')})、脉搏(${uni.getStorageSync('MB_MIN')}~${uni.getStorageSync(
					'MB_MAX'
				)})`;
			} else if (this.type === '胆固醇') {
				this.healthParamStr = `正常值：总胆固醇(${uni.getStorageSync('DGC_MIN')}~${uni.getStorageSync('DGC_MAX')})`;
			} else if (this.type === '体温') {
				this.healthParamStr = `正常值：体温(${uni.getStorageSync('TW_MIN')}~${uni.getStorageSync('TW_MAX')})`;
			} else if (this.type === '尿常规') {
				this.healthParamStr = `正常值：酸碱度PH(${uni.getStorageSync('NCG_PH_MIN')}~${uni.getStorageSync('NCG_PH_MAX')})、比重(${uni.getStorageSync(
					'NCG_SG_MIN'
				)}~${uni.getStorageSync('NCG_SG_MAX')})`;
			}
		},
		getServerData(type) {
			const params = {};
			params['page'] = this.page;
			if (this.testType) params['testType'] = this.testType;
			if (this.cstmId) params['cstmId'] = this.cstmId;
			this.$http
				.get(`${getHealthDayList}`, params)
				.then(r => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
					this.historyList = [...this.historyList, ...r.data];
					this.historyList.forEach((item,index) => {
						if (this.type === '血压') {
							item['images'] = 'sd_xieya.png';
							item['texts'] = `高压：${item.systolic_pressure == 0 ? '--' : item.systolic_pressure} mmHg\n低压：${
								item.diastolic_pressure == 0 ? '--' : item.diastolic_pressure
							} mmHg\n脉搏：${item.rulse_rate == 0 ? '--' : item.rulse_rate} 次/分`;
							item['gaugeType'] = item.gauge_type;
							if (item.systolic_pressure > uni.getStorageSync('XY_GY_MAX') || item.systolic_pressure < uni.getStorageSync('XY_GY_MIN')) {
								item['isFlag'] = true;
								item['text'] = '高压异常';
							} else if (item.diastolic_pressure > uni.getStorageSync('XY_DY_MAX') || item.diastolic_pressure < uni.getStorageSync('XY_DY_MIN')) {
								item['isFlag'] = true;
								item['text'] = '低压异常';
							} else if (
								(item.systolic_pressure > uni.getStorageSync('XY_GY_MAX') || item.systolic_pressure < uni.getStorageSync('XY_GY_MIN')) &&
								(item.diastolic_pressure > uni.getStorageSync('XY_DY_MAX') || item.diastolic_pressure < uni.getStorageSync('XY_DY_MIN'))
							) {
								item['isFlag'] = true;
								item['text'] = '高压、低压异常';
							} else {
								item['isFlag'] = false;
								item['text'] = '正常';
							}
							if(index === 0){
								//.gaugeOption1.id='gaugeId0';
								this.gaugeOption1.value = item.systolic_pressure;
								this.gaugeOption1.axisTickLength = 2;
								this.gaugeOption1.name = '高压';													
								
								//this.gaugeOption2.id='gaugeId1';
								this.gaugeOption2.value = item.diastolic_pressure;
								this.gaugeOption2.axisTickLength = 2;
								this.gaugeOption2.name = '低压'

																
								//this.gaugeOption3.id='gaugeId2';
								//this.gaugeOption3.value = item.rulse_rate;
								//this.gaugeOption3.axisTickLength = 2;
								//this.gaugeOption3.name = '心率'
								
								if (item.systolic_pressure > uni.getStorageSync('XY_GY_MAX') || item.systolic_pressure < uni.getStorageSync('XY_GY_MIN')) {
									this.gaugeOption1.status = 1;
								}else if(item.diastolic_pressure > uni.getStorageSync('XY_DY_MAX') || item.diastolic_pressure < uni.getStorageSync('XY_DY_MIN')){
									this.gaugeOption2.status = 1;
								} else {
									this.gaugeOption1.status = 0;
									this.gaugeOption2.status = 0;		
								}																
							}							
							
						} else if (this.type === '血糖') {
							item['images'] = 'sd_xietang.png';
							item['texts'] = `${item.conditions === 0 ? '餐后：' : '餐前：'} ${item.blood_glucose} mol/l`;
							item['gaugeType'] = item.gauge_type;
							if (item.conditions === 0) {
								if (item.blood_glucose > uni.getStorageSync('XT_CH_MAX')) {
									item['isFlag'] = true;
									item['text'] = '餐后偏高';
								}
								if (item.blood_glucose < uni.getStorageSync('XT_CH_MIN')) {
									item['isFlag'] = true;
									item['text'] = '餐后偏低';
								}
								if (item.blood_glucose <= uni.getStorageSync('XT_CH_MAX') && item.blood_glucose >= uni.getStorageSync('XT_CH_MIN')) {
									item['isFlag'] = false;
									item['text'] = '餐后正常';
								}
							} else {
								if (item.blood_glucose > uni.getStorageSync('XT_CH_MAX')) {
									item['isFlag'] = true;
									item['text'] = '餐前偏高';
								}
								if (item.blood_glucose < uni.getStorageSync('XT_CH_MIN')) {
									item['isFlag'] = true;
									item['text'] = '餐前偏低';
								}
								if (item.blood_glucose <= uni.getStorageSync('XT_CH_MAX') && item.blood_glucose >= uni.getStorageSync('XT_CH_MIN')) {
									item['isFlag'] = false;
									item['text'] = '餐前正常';
								}
							}
														
						  if(index === 0){
								
								if (item.conditions === 0) {
									this.gaugeOption1.id='gaugeId0';
									this.gaugeOption1.value = item.blood_glucose;
									this.gaugeOption1.axisTickLength = 2;
									this.gaugeOption1.name = '餐后';	
									
									if (item.blood_glucose > uni.getStorageSync('XT_CH_MAX')) {
										this.gaugeOption1.status = 1;
									}
									if (item.blood_glucose < uni.getStorageSync('XT_CH_MIN')) {
										this.gaugeOption1.status = 1;									
									}
									if (item.blood_glucose <= uni.getStorageSync('XT_CH_MAX') && item.blood_glucose >= uni.getStorageSync('XT_CH_MIN')) {
										this.gaugeOption1.status = 0;
									}																				
									
								}else{
									this.gaugeOption1.id='gaugeId0';
									this.gaugeOption1.value = item.blood_glucose;
									this.gaugeOption1.axisTickLength = 2;
									this.gaugeOption1.name = '餐前';
									
									if (item.blood_glucose > uni.getStorageSync('XT_CH_MAX')) {
										this.gaugeOption1.status = 1;
									}
									if (item.blood_glucose < uni.getStorageSync('XT_CH_MIN')) {
										this.gaugeOption1.status = 1;									
									}
									if (item.blood_glucose <= uni.getStorageSync('XT_CH_MAX') && item.blood_glucose >= uni.getStorageSync('XT_CH_MIN')) {
										this.gaugeOption1.status = 0;
									}																																			
								}	
																																				
							}							
							
						} else if (this.type === '血氧') {
							item['images'] = 'sd_xieyang.png';
							item['texts'] = `血氧值：${item.oxygen_saturation == 0 ? '--' : item.oxygen_saturation} %\n脉搏率：${
								item.pulse_rate == 0 ? '--' : item.pulse_rate
							} 次/分`;
							item['gaugeType'] = item.gauge_type;
							if (item.oxygen_saturation > uni.getStorageSync('XY_MAX')) {
								item['isFlag'] = true;
								item['text'] = '偏高';
							} else if (item.oxygen_saturation >= uni.getStorageSync('XY_MIN') && item.oxygen_saturation <= uni.getStorageSync('XY_MAX')) {
								item['isFlag'] = false;
								item['text'] = '正常';
							} else if (item.oxygen_saturation < uni.getStorageSync('XY_MIN')) {
								item['isFlag'] = true;
								item['text'] = '偏低';
							}
							if(index === 0){
								this.gaugeOption1.id='gaugeId0';
								this.gaugeOption1.value = item.oxygen_saturation;
								this.gaugeOption1.axisTickLength = 2;
								this.gaugeOption1.name = '血氧';	
								
								this.gaugeOption2.id='gaugeId1';
								this.gaugeOption2.value = item.pulse_rate;
								this.gaugeOption2.axisTickLength = 2;
								this.gaugeOption2.name = '脉搏率';
																				
																
								if (item.oxygen_saturation >= uni.getStorageSync('XY_MIN') && item.oxygen_saturation <= uni.getStorageSync('XY_MAX')) {
									this.gaugeOption1.status = 0;
								}else {
									this.gaugeOption1.status = 1;
								}																
							}							
							
						} else if (this.type === '胆固醇') {
							item['images'] = 'sd_xiezhi.png';
							item['texts'] = `胆固醇：${item.chol == 0 ? '--' : item.chol} mmol`;
							item['gaugeType'] = item.gauge_type;
							if (item.chol > uni.getStorageSync('DGC_MAX')) {
								item['isFlag'] = true;
								item['text'] = '偏高';
							} else if (item.chol >= uni.getStorageSync('DGC_MIN') && item.chol <= uni.getStorageSync('DGC_MAX')) {
								item['isFlag'] = false;
								item['text'] = '正常';
							} else if (item.chol > 0 && item.chol < uni.getStorageSync('DGC_MIN')) {
								item['isFlag'] = true;
								item['text'] = '偏低';
							}
							if(index === 0){
								this.gaugeOption1.id='gaugeId0';
								this.gaugeOption1.value = item.chol;
								this.gaugeOption1.axisTickLength = 2;
								this.gaugeOption1.name = '胆固醇';					
																
								if (item.chol >= uni.getStorageSync('DGC_MIN') && item.chol <= uni.getStorageSync('DGC_MAX')){
									this.gaugeOption1.status = 0;
								}else {
									this.gaugeOption1.status = 1;
								}																
							}							
							
							
						} else if (this.type === '体质') {
							item['images'] = 'sd_tizhi.png';
							item['texts'] = `体重：${item.weight == 0 ? '--' : item.weight} kg\n身高：${item.height == 0 ? '--' : item.height} cm\nBMI：${
								item.bmi == 0 ? '--' : item.bmi
							}%`;
							item['gaugeType'] = item.gauge_type;
							if(index === 0){
								this.gaugeOption1.id='gaugeId0';
								this.gaugeOption1.value = item.weight;
								this.gaugeOption1.axisTickLength = 2;
								this.gaugeOption1.name = '体重';					
								
								this.gaugeOption2.id='gaugeId1';
								this.gaugeOption2.value = item.height;
								this.gaugeOption2.axisTickLength = 2;
								this.gaugeOption2.name = '身高'
								
								this.gaugeOption1.status = 0;
								this.gaugeOption2.status = 0;															
																								
							}							
														
						} else if (this.type === '运动') {
							item['images'] = 'sd_yundong.png';
							item['texts'] = `已走：${item.actual == 0 ? '--' : item.actual} 步\n目标：${item.target == 0 ? '--' : item.target} 步`;
							item['gaugeType'] = item.gauge_type;
							if(index === 0){
								this.gaugeOption1.id='gaugeId0';
								this.gaugeOption1.value = item.actual;
								this.gaugeOption1.axisTickLength = 2;
								this.gaugeOption1.name = '步数';					
							
								this.gaugeOption1.status = 0;
															
							}							
						} else if (this.type === '体温') {
							item['images'] = 'sd_tiweng.png';
							item['texts'] = `体温：${item.body_temperature == 0 ? '--' : item.body_temperature} ℃`;
							item['gaugeType'] = item.gauge_type;
							if (item.body_temperature > uni.getStorageSync('TW_MAX')) {
								item['isFlag'] = true;
								item['text'] = '偏高';
							} else if (item.body_temperature >= uni.getStorageSync('TW_MIN') && item.body_temperature <= uni.getStorageSync('TW_MAX')) {
								item['isFlag'] = false;
								item['text'] = '正常';
							} else if (item.body_temperature > 0 && item.body_temperature < uni.getStorageSync('TW_MIN')) {
								item['isFlag'] = true;
								item['text'] = '偏低';
							}
							if(index === 0){
								this.gaugeOption1.id='gaugeId0';
								this.gaugeOption1.value = item.body_temperature;
								this.gaugeOption1.axisTickLength = 2;
								this.gaugeOption1.name = '体温';					
								
								
								if (item.body_temperature >= uni.getStorageSync('TW_MIN') && item.body_temperature <= uni.getStorageSync('TW_MAX')){
									this.gaugeOption1.status = 0;
								}else {
									this.gaugeOption1.status = 1;	
								}																
							}							
							
						} else if (this.type === '尿酸') {
							item['images'] = 'sd_ecgdata.png';
							item['texts'] = `尿酸: ${item.uric_acid == 0 ? '--' : item.uric_acid} mmol`;
							item['gaugeType'] = item.gauge_type;
							let tw = item.uric_acid;
							if (tw > uni.getStorageSync('NS_UMOL_MAX')) {
								item['isFlag'] = true;
								item['text'] = '偏高';
							} else if (tw >= uni.getStorageSync('NS_UMOL_MIN') && tw <= uni.getStorageSync('NS_UMOL_MAX')) {
								item['isFlag'] = false;
								item['text'] = '正常';
							} else if (tw > 0 && tw < uni.getStorageSync('NS_UMOL_MIN')) {
								item['isFlag'] = true;
								item['text'] = '偏低';
							}
							if(index === 0){
								this.gaugeOption1.id='gaugeId0';
								this.gaugeOption1.value = item.uric_acid;
								this.gaugeOption1.axisTickLength = 2;
								this.gaugeOption1.name = '尿酸';					
											
								if (tw >= uni.getStorageSync('NS_UMOL_MIN') && tw <= uni.getStorageSync('NS_UMOL_MAX')){
									this.gaugeOption1.status = 0;
								}else {
									this.gaugeOption1.status = 1;
					
								}																
							}							
							
						} else if (this.type === '心率') {
							item['images'] = 'sd_ecgdata.png';
							item['texts'] = `心率：${item.avr_heartrate == 0 ? '--' : item.avr_heartrate} 次/分`;
							item['gaugeType'] = item.gauge_type;
							var heart = item.avr_heartrate;
							if (heart > uni.getStorageSync('MB_MAX')) {
								item['isFlag'] = true;
								item['text'] = '偏高';
							} else if (heart >= uni.getStorageSync('MB_MIN') && heart <= uni.getStorageSync('MB_MAX')) {
								item['isFlag'] = false;
								item['text'] = '正常';
							} else if (heart > 0 && heart < uni.getStorageSync('MB_MIN')) {
								item['isFlag'] = true;
								item['text'] = '偏低';
							}
							
							if(index === 0){
								this.gaugeOption1.id='gaugeId0';
								this.gaugeOption1.value = item.avr_heartrate;
								this.gaugeOption1.axisTickLength = 2;
								this.gaugeOption1.name = '心率';					
								
								
								if (heart >= uni.getStorageSync('MB_MIN') && heart <= uni.getStorageSync('MB_MAX')){
									this.gaugeOption1.status = 0;
								}else {
									this.gaugeOption1.status = 1;
								}																
							}							
						}
					});

					let series = [];
					let categories = [];
					let chartData = {};
					let data = [];
					let data2 = [];
					let data3 = [];
					let serie = {};
					let serie2 = {};
					let serie3 = {};
					/*
					this.historyList.forEach((item, index) => {
						let gTime = moment(item.gauge_time).format('YYYY-MM-DD');
						categories.push(gTime);
						if (this.type === '血压') {
							data.push(item.systolic_pressure);
							data2.push(item.diastolic_pressure);
							data3.push(item.rulse_rate);

						} else if (this.type === '血糖') {
							if (item.conditions === 0) data.push(item.blood_glucose);
							else data2.push(item.blood_glucose);
						} else if (this.type === '心率') {
							data.push(item.avr_heartrate);
						} else if (this.type === '运动') {
							data.push(item.target);
							data2.push(item.actual);
						} else if (this.type === '尿酸') {
							data.push(item.uric_acid);
						} else if (this.type === '体质') {
							data.push(item.weight);
							data2.push(item.height);
							data3.push(item.bmi);
						} else if (this.type === '血氧') {
							data.push(item.oxygen_saturation);
							data2.push(item.pulse_rate);
						} else if (this.type === '胆固醇') {
							data.push(item.chol);
						} else if (this.type === '体温') {
							data.push(item.body_temperature);
						} else if (this.type === '尿常规') {
						}
					});

					if (this.type === '血压') {
						serie['name'] = '高压';
						serie['data'] = data;
						serie2['name'] = '低压';
						serie2['data'] = data2;
						serie3['name'] = '脉搏';
						serie3['data'] = data3;

						series.push(serie);
						series.push(serie2);
						series.push(serie3);
					} else if (this.type === '血糖') {
						serie['name'] = '餐后';
						serie['data'] = data;
						serie2['name'] = '餐前';
						serie2['data'] = data2;

						series.push(serie);
						series.push(serie2);
					} else if (this.type === '心率') {
						serie['name'] = '心率';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '运动') {
						serie['name'] = '目标';
						serie['data'] = data;
						serie2['name'] = '实际';
						serie2['data'] = data2;

						series.push(serie);
						series.push(serie2);
					} else if (this.type === '尿酸') {
						serie['name'] = '尿酸';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '体质') {
						serie['name'] = '体重';
						serie['data'] = data;
						serie2['name'] = '身高';
						serie2['data'] = data2;
						serie3['name'] = 'BMI';
						serie3['data'] = data3;

						series.push(serie);
						series.push(serie2);
						series.push(serie3);
					} else if (this.type === '血氧') {
						serie['name'] = '血氧值';
						serie['data'] = data;
						serie2['name'] = '脉搏率';
						serie2['data'] = data2;

						series.push(serie);
						series.push(serie2);
					} else if (this.type === '胆固醇') {
						serie['name'] = '胆固醇';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '体温') {
						serie['name'] = '体温';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '尿常规') {
					}

					console.log('series: ' + JSON.stringify(series));
					chartData.series = series;
					chartData.categories = categories;
					_self.showColumn("canvasColumn",chartData);
					*/
				})
				.catch(() => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		},
		showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
          colors:['#facc14', '#f04864', '#8543e0', '#90ed7d'],
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
						//disableGrid:true
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
			},
			touchLineA(e) {
				lastMoveTime=Date.now();
			},
			moveLineA(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime = currMoveTime;
				
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineA(e){
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
		showColumn(canvasId, chartData) {
			canvaColumn = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'column',
				fontSize: 11,
				padding: [5, 15, 15, 15],
				legend: {
					show: true,
					position: 'top',
					float: 'center',
					itemGap: 30,
					padding: 5,
					margin: 5,
					//backgroundColor:'rgba(41,198,90,0.2)',
					//borderColor :'rgba(41,198,90,0.5)',
					borderWidth: 1
				},
				dataLabel: true,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				enableScroll: true,
				xAxis: {
					disableGrid: false,
					type: 'grid',
					gridType: 'dash',
					itemCount: 4,
					scrollShow: true,
					scrollAlign: 'left'
				},
				yAxis: {
					//disabled:true
					gridType: 'dash',
					splitNumber: 4,
					min: 10,
					max: 180,
					format: val => {
						return val.toFixed(0);
					} //如不写此方法，Y轴刻度默认保留两位小数
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					column: {
						type: 'group',
						width: (_self.cWidth * _self.pixelRatio * 0.45) / chartData.categories.length
					}
				}
			});
		},
		showGauge(canvasId, chartData) {
			canvaGauge = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'gauge',
				fontSize: 11,
				legend: { show: false },
				title: {
					name: Math.round(chartData.series[0].data * 100) + '%',
					color: chartData.categories[1].color,
					fontSize: 25 * _self.pixelRatio,
					offsetY: 50 * _self.pixelRatio //新增参数，自定义调整Y轴文案距离
				},
				subtitle: {
					name: chartData.series[0].name,
					color: '#666666',
					fontSize: 15 * _self.pixelRatio,
					offsetY: -50 * _self.pixelRatio //新增参数，自定义调整Y轴文案距离
				},
				extra: {
					gauge: {
						type: 'default',
						width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
						startAngle: 0.75,
						endAngle: 0.25,
						startNumber: 0,
						endNumber: 100,
						splitLine: {
							fixRadius: 0,
							splitNumber: 10,
							width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
							color: '#FFFFFF',
							childNumber: 5,
							childWidth: _self.gaugeWidth * 0.4 * _self.pixelRatio //仪表盘背景的宽度
						},
						pointer: {
							width: _self.gaugeWidth * 0.8 * _self.pixelRatio, //指针宽度
							color: 'auto'
						}
					}
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				dataLabel: true
			});
		},
		touchColumn(e) {
			canvaColumn.scrollStart(e);
		},
		moveColumn(e) {
			canvaColumn.scroll(e);
		},
		touchEndColumn(e) {
			canvaColumn.scrollEnd(e);
			canvaColumn.touchLegend(e, {
				animation: true
			});
			canvaColumn.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		},
		changeData() {
			if (isJSON(_self.textarea)) {
				let newdata = JSON.parse(_self.textarea);
				canvaColumn.updateData({
					series: newdata.series,
					categories: newdata.categories,
					scrollPosition: 'right',
					animation: false
				});
			} else {
				uni.showToast({
					title: '数据格式错误',
					image: '../../../static/images/alert-warning.png'
				});
			}
		}
	}
};
</script>

<!-- <script>
	import bestGauge from '@/components/best-gauge/best-gauge.vue'
	export default {
		data() {
			let _width = uni.upx2px(350);
			return {
				gaugeOption0:{
					id: 'gaugeId0',
					value: 75.8,
					axisTickLength: 2//该属性与axisTick互斥，存在axisTickLength并大于0，axisTick就无效
				},
				gaugeOption1: {
					id: 'gaugeId1',
					bgColor:'rgba(255,255,255,1)',
					startAngle: 0.75,
					endAngle: 0.25,
					width: _width,
					status: 1,//设备是否在线 0 离线 1在线
					padding: 10,
					min: 0,
					max: 100,	
					value: 75.8,
					unit: '%',
					name: '当前湿度',
					detail: {//数值单位设置
						title: {//name字体位置设置
							color:'#888888',
							fontSize: uni.upx2px(24),
							fontWeight:'500',
							offsetCenter:[0,uni.upx2px(-40)],
							textAlign:'center'
						},
						value: {
							color:'#323232',
							fontSize: uni.upx2px(48),
							fontWeight:'bold',
							offsetCenter:[0,uni.upx2px(40)],//距离圆心直径偏移
							textAlign:'center'
						},
						unit: {
							color:'#323232',
							fontSize: uni.upx2px(22),
							fontWeight:'bold',
							offsetCenter:[0,uni.upx2px(40)],//距离圆心直径偏移
							textAlign:'center'
						}
					},
					axisTick:[//轴刻度线
						{
							width: uni.upx2px(25),//轴长
							number: 6,//轴数量（相当于几等分）
							color: '#369c96,#d5d5d5',//轴颜色(第一个值--指针之前的颜色，之后的颜色)
							subNumber: 10,//一个大刻度分成几个小刻度
							subHeight:1,
							subWidth:  uni.upx2px(25),
							padding: uni.upx2px(10)//刻度距离边距
						},
						{
							width: uni.upx2px(10),//轴长
							number: 6,//轴数量（相当于几等分）
							color: '#d5d5d5',//轴颜色(第一个值--指针之前的颜色，之后的颜色)
							subNumber: 10,//一个大刻度分成几个小刻度
							subHeight:1,
							subWidth:  uni.upx2px(6),
							padding: uni.upx2px(25)//刻度距离边距
						}
					]
				}
			}
		},
		components: {
			bestGauge
		},
		onLoad() {

		},
		methods: {
			update:function(){
				let gaugeOption0 = JSON.parse(JSON.stringify(this.gaugeOption0))
				let gaugeOption1 = JSON.parse(JSON.stringify(this.gaugeOption1))
				gaugeOption0.value = this.getRandom(gaugeOption0.max);
				gaugeOption1.value = this.getRandom(gaugeOption1.max);
				this.gaugeOption0 = gaugeOption0;
				this.gaugeOption1 = gaugeOption1;
			},
			getRandom:function(max){
				max = max || 100;
				let _random = (Math.random() * max).toFixed(1);
				return _random * 1;
			}
		}
	}
</script> -->

<style>	
	.uni-flex {
		display: flex;
		flex-direction: row;
	}
	.flex-item {
		width: 50%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}	
	.uni-flex-item {
		flex: 1;
	}
	.uni-row {
		flex-direction: row;
	}
	.uni-column {
		flex-direction: column;
	}
</style>

<style lang="scss" scoped>
page {
	background: $page-color-base;
}
.footprint {
	.row {
		width: calc(94%);
		height: calc(22vw + 40upx);
		margin: 20upx auto;
		border-radius: 15upx;
		box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		z-index: 4;
		border: 0;
		.menu {
			.icon {
				color: #fff;
				font-size: 60upx;
			}
			position: absolute;
			width: 29%;
			height: 100%;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2;
		}
		.carrier {
			@keyframes showMenu {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(-30%);
				}
			}
			@keyframes closeMenu {
				0% {
					transform: translateX(-30%);
				}
				100% {
					transform: translateX(0);
				}
			}
			&.open {
				animation: showMenu 0.25s linear both;
			}
			&.close {
				animation: closeMenu 0.15s linear both;
			}
			background-color: #fff;
			position: absolute;
			width: 100%;
			padding: 0 0;
			height: 100%;
			z-index: 3;
			display: flex;
			align-items: center;
			.left {
				width: 22vw;
				height: 22vw;
				margin-left: 20upx;
				margin-right: 10upx;
				position: relative;
				.image {
					border-radius: 10upx;
					width: 22vw;
					height: 22vw;
				}
				.tag {
					position: absolute;
					left: 0;
					top: 0;
					width: 60upx;
					height: 60upx;
				}
			}
			.mid {
				width: 100%;
				margin: 10upx 10upx 0;
				.title {
					height: 60upx;
					line-height: 1.2;
					font-size: $font-base;
				}
				.data {
					width: 100%;
					display: flex;
					align-items: center;
					margin: 10upx 0 5upx;
					font-size: $font-base;
					color: $font-color-base;
					.item {
						flex: 1;
					}
					.iconfont {
						color: $font-color-light;
						margin-right: 10upx;
					}
					.status {
						padding: 6upx 20upx;
						background-color: $base-color;
						opacity: 0.8;
						color: $color-white;
						font-size: $font-sm;
						border-radius: 6upx;
					}
					.normal {
						padding: 6upx 20upx;
						background-color: #4cd964;
						opacity: 0.8;
						color: $color-white;
						font-size: $font-sm;
						border-radius: 6upx;
					}
				}
				.bottom {
					line-height: 1.2;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: $font-sm;
					color: $font-color-light;
					.price {
						font-size: $font-lg;
					}
				}
			}
		}
	}
}
</style>
